<template>
	<view class="passenger-flow">
		<view class="box_9">
			<view>
				<v-gap />
				<view class="listall">
					<view class="d-flex flex-column listsee">
						<view class="d-flex flex-row justify-space-between">
							<view class="d-flex flex-row align-center">
								<view class="">
									<image style="width: 80rpx;height: 80rpx;border-radius: 50% 50%;" :src="member.headimg" mode="">
									</image>
								</view>
								<view class="d-flex flex-column" style="margin-left: 20rpx;">
									<view class="" style="font-size: 26rpx;">
										{{member.username?member.username:''}}
									</view>
									<view class="" style="color: #c2c2c2;font-size: 24rpx;">
										{{member.phone?member.phone:''}}
									</view>
									<view class="" style="color: #c2c2c2;font-size: 24rpx;">
										{{member.base_sex?member.base_sex:''}} | {{member.base_age?member.base_age:''}}岁
									</view>
								</view>
							</view>
							<view class="d-flex flex-row align-center">
								<view class="" v-if="member.is_sure == 1"
									style="width: 80rpx;height: 40rpx;background: #eaffe9;color: #7cc57e;font-size: 20rpx;text-align: center;margin-right: 20rpx;line-height: 40rpx;">
									已认证
								</view>
								<view class="" v-if="member.is_sure == 0"
									style="width: 80rpx;height: 40rpx;background: #c2c2c2;color: #ffffff;font-size: 20rpx;text-align: center;margin-right: 20rpx;line-height: 40rpx;">
									未认证
								</view>
								<!-- <view class="">
									<image style="width: 30rpx;height: 30rpx;" src="../../static/logo.png" mode="">
									</image>
								</view> -->
							</view>
						</view>
						<view class="d-flex flex-row">
							<view class="d-flex flex-column"
								style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;width: 280rpx;">
								<view class="">
									身份证号
								</view>
								<view class="">
									{{member.card_num?member.card_num:''}}
								</view>
							</view>
							<view class="d-flex flex-column"
								style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;width: 280rpx;">
								<view class="">
									出生日期
								</view>
								<view class="">
									{{member.base_birthday?member.base_birthday:''}}
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="all_whole">
					<view class="all_whole_be">
						<view class="all_whole_or bg-color-all">
							<view class="wz-color-all1">
								{{member.point.points?member.point.points:0}}
							</view>
							<view class="wz-color-all2">
								积分
							</view>
						</view>
						<view class="all_whole_or bg-color-reading">
							<view class="wz-color-all1">
								{{member.user_coupon_count?member.user_coupon_count:0}}
							</view>
							<view class="wz-color-reading2">
								优惠券
							</view>
						</view>
						<view class="all_whole_or bg-color-graduated">
							<view class="wz-color-all1">
								{{member.order_item_count?member.order_item_count:0}}
							</view>
							<view class="wz-color-graduated2">
								订单
							</view>
						</view>
						<view class="all_whole_or bg-color-potential">
							<view class="wz-color-all1">
								{{member.money_bag?member.money_bag:0}}
							</view>
							<view class="wz-color-potential2">
								钱包
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="" style="padding: 30rpx 30rpx 0 30rpx;"  v-if="cardlist.length>0">
					我的卡包
				</view>
				<scroll-view scroll-y class="li_stall" @scrolltolower="on_ReachBottom" v-if="cardlist.length>0">
					<v-gap />
					<view class="d-flex flex-column listsee" v-for="(item,index) in cardlist" :key="index">
						<view class="d-flex flex-row justify-space-between">
							<view class="d-flex flex-row align-center">
								<view class="" style="font-size: 26rpx;">
									{{item.card_name}}
								</view>
							</view>
							<view class="d-flex flex-row align-center">
								<view class=""
									style="width: 80rpx;height: 40rpx;background: #ccffcc;color: #7cc57e;font-size: 24rpx;text-align: center;margin-right: 20rpx;line-height: 40rpx;">
									{{item.open_text}}
								</view>
							</view>
						</view>
						<view class="d-flex flex-row" style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;">
							<view class="" >
								有效期限{{item.startdate}}--{{item.enddate}}
							</view>
						</view>
						<!--  计次卡type1  时间卡type2 充值卡type3 私教卡type4-->
						<view class="d-flex flex-row justify-space-between"
							style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;">
							<view class="" style="width: 280rpx;">
								剩余
							</view>
							<view class="" style="font-size: 30rpx;color: #000000;">
								{{item.else_text}}
							</view>
						</view>
					</view>
					<view class="" v-if="cardnum.length > 3 && cardpage == 1"
						style="width: 96%;margin-left: 2%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
						@click="oncard">
						<image style="width: 23.83rpx;height: 20.41rpx;" :src="zx22" mode=""></image>
					</view>
					<view class="" v-if="cardnum.length > 3 && cardpage == 2"
						style="width: 96%;margin-left: 2%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
						@click="offcard">
						<image style="width: 23.83rpx;height: 20.41rpx;transform: rotate(180deg);" :src="zx22" mode=""></image>
					</view>
				</scroll-view>
				
				<view class="" style="padding: 0rpx 30rpx 0 30rpx;">
					我的课程
				</view>
				<scroll-view scroll-y class="onlist" @scrolltolower="onReach_Bottom" v-if="trainlist.length>0">
					<view v-for="item in trainlist" class="item flex-align">
						<view class="" style="box-shadow: 0px 6rpx 13rpx 1rpx rgba(23, 106, 180, 0.2);">
							<view class="">
								<view class="">
									<image style="width: 710rpx;height: 300rpx;" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/4a/ed0078719b58de623422c98f7785ad.jpg?attname=ANNER%E8%BD%AE%E6%92%AD%E5%9B%BE+%283%29.jpg" mode=""></image>
								</view>
								<view class="d-flex flex-row justify-space-between" style="margin-top: 10rpx;margin-left: 20rpx;">
									<view class="" style="font-size: 28rpx;">
										{{item.train_name}}
									</view>
									<view class="d-flex flex-column" v-if="item.status == 1"
										style="width: 140rpx;height: 50rpx;background: #80a2ff;color: #ffffff;font-size: 24rpx;text-align: center;line-height: 50rpx;border-radius: 10rpx;margin-right: 20rpx;">
										进行中
									</view>
									<view class="d-flex flex-column" v-if="item.status == 0"
										style="width: 140rpx;height: 50rpx;background: #80a2ff;color: #ffffff;font-size: 24rpx;text-align: center;line-height: 50rpx;border-radius: 10rpx;margin-right: 20rpx;">
										未进行
									</view>
									<view class="d-flex flex-column" v-if="item.status == 2"
										style="width: 140rpx;height: 50rpx;background: #80a2ff;color: #ffffff;font-size: 24rpx;text-align: center;line-height: 50rpx;border-radius: 10rpx;margin-right: 20rpx;">
										已结课
									</view>
								</view>
								<view class="" style="font-size: 24rpx; margin-left: 20rpx;">
									{{item.area_name}}
								</view>
								<view class="d-flex flex-row justify-space-between align-center" style="margin-top: 10rpx;margin:20rpx;">
									<view class="d-flex flex-row align-center justify-center" style="font-size: 28rpx;">
										<view class="" style="font-size: 24rpx; margin-right: 20rpx;">
											剩余{{item.left_num}}次
										</view>
										<view class="" style="font-size: 24rpx;margin-left: 10rpx;">
											{{item.train_item_name}}
										</view>
									</view>
								</view>
								<view class="" style="margin-left: 20rpx;height: 50rpx;width: 94%;">
									<u-line-progress :percentage="item.percent" activeColor="#00aa7f"></u-line-progress>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				
			</view>
		</view>
	</view>
</template>
<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				filterData: [],
				itemChooselist: {},
				venuelist: [],
				plshow: true,
				weekSelect: [], //选中的
				member: {},
				isAllSelect: false, //是否全选
				cardlist: [],
				cardpage: 1,
				cardnum:0,
				zx22: 'https://sass-test.doit10019.com/upload/202501/18152308-41274066520471393.png?attname=zx22.png',
				id:'',
				venue_id:'',
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
				listQuery1: { //分页
					pageNo1: 1,
					pageSize1: 10,
				},
				totalPage1: '', //几页
				trainlist:[]
			}
		},
		onLoad(options) {
			this.id = options.id
			this.venue_id = options.venue_id
			this.userdetail()
			this.usercards()
			this.usercourses()
		},
		methods: {
			async userdetail() {
				let that = this
				let params = {
					output: 'json',
					user_id:this.id,
					venue_id:this.venue_id 
				};
				let res = await venues.userdetail(params);
				if (res.code === 1) {
					this.member = res.data
				}
			},
			async usercards() {
				let that = this
				if (this.listQuery.pageNo === 1) that.cardlist = [];
				let params = {
					output: 'json',
					user_id:this.id,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				};
				let res = await venues.usercards(params);
				if (res.code === 1) {
					// if (that.cardpage == 1) {
					// 	that.cardlist = res.data.slice(0, 3)
					// 	that.cardnum =  res.data
					// } else {
					// 	that.cardlist =  res.data
					// }
					that.cardlist = that.cardlist.concat(res.data.data); //将数据拼接在一起
					that.totalPage = res.data.last_page
				}
			},
			// 滚动加载
			on_ReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.usercards()
			},
			async usercourses() {
				let that = this
				if (this.listQuery1.pageNo1 === 1) that.trainlist = [];
				let params = {
					output: 'json',
					user_id:this.id,
					page: this.listQuery1.pageNo1,
					limit: this.listQuery1.pageSize1,
				};
				let res = await venues.usercourses(params);
				if (res.code === 1) {
					that.trainlist = that.trainlist.concat(res.data.data); //将数据拼接在一起
					that.totalPage1 = res.data.last_page
				}
			},
			// 滚动加载
			onReach_Bottom() {
				if (this.totalPage1 <= this.listQuery1.pageNo1) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery1.pageNo1 += 1;
				this.usercourses()
			},
			oncard() {
				this.cardlist = []
				this.cardpage = 2
				this.usercards()
			},
			offcard() {
				this.cardlist = []
				this.cardpage = 1
				this.usercards()
			},
			handSelect(item) {

			},

		}
	}
</script>

<style lang="scss" scoped>
	.passenger-flow {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #EDF5F5;
		padding: 0rpx 0 50rpx 0;
		position: relative;

		.box_9 {
			width: 750rpx;
			height: 100%;
			// margin-bottom: 1rpx;
			display: flex;
			flex-direction: column;
			
			.listall{
				
				.listsee {
					background-color: #fff;
					padding: 30rpx;
					border-radius: 10rpx;
					width: 94%;
					margin-left: 3%;
					border: 2rpx #fff solid;
					margin-bottom: 20rpx;
				}
				
				.active1 {
					border: 2rpx #0000ff solid;
				}
			}

			.tag-list {
				display: flex;
				margin-top: 30rpx;
				padding: 0 20rpx;

				/deep/ view {
					margin-left: 4rpx;
				}
			}

			.box_11 {
				width: 100%;
				height: 130rpx;
				display: flex;
				flex-direction: row;
				background: #ffffff;
				padding: 0 20rpx;

				// .image-wrapper_7 {
				// 	width: 541rpx;
				// 	height: 60rpx;
				// 	flex-direction: row;
				// 	display: flex;
				// 	margin-top: 15rpx;
				// }
				.image-wrapper_7 {
					position: absolute;
					left: 30rpx;
					top: 30rpx;
					width: 541rpx;
					height: 62rpx;
					flex-direction: row;
					display: flex;
				}

				.label_list {
					display: flex;
					flex-direction: column;
					position: absolute;
					justify-content: center;
					/* 相对父元素水平居中 */
					align-items: center;
					/*  子元素相对父元素垂直居中 */
					right: 90rpx;
					width: 80rpx;
					top: 27rpx;

					.label_7 {
						width: 36rpx;
						height: 36rpx;
					}

					.label_77 {
						width: 60rpx;
						height: 36rpx;
						color: #333333;
						font-size: 26rpx;
						text-align: center;
					}
				}

				.label8_list {
					display: flex;
					flex-direction: column;
					position: absolute;
					justify-content: center;
					/* 相对父元素水平居中 */
					align-items: center;
					/*  子元素相对父元素垂直居中 */
					right: 20rpx;
					width: 80rpx;
					top: 27rpx;

					.label_8 {
						width: 36rpx;
						height: 36rpx;
					}

					.label_88 {
						width: 60rpx;
						height: 36rpx;
						color: #333333;
						font-size: 26rpx;
						text-align: center;
					}
				}
			}

			.all_whole {
				width: 100%;
				display: flex;
				flex-direction: column;
				// background: #ffffff;

				.all_whole_be {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					padding: 0 10rpx;
					margin-top: 20rpx;

					.all_whole_or {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 20%;
						height: 120rpx;
						// border-radius: 20rpx;
					}

					/* 使用类名来设置背景色 */
					.bg-color-all {
						background: #ffffff;
					}

					.bg-color-reading {
						background: #ffffff;
					}

					.bg-color-graduated {
						background: #ffffff;
					}

					.bg-color-potential {
						background: #ffffff;
					}

					.wz-color-all1 {
						font-size: 24rpx;
					}

					.wz-color-all2 {
						color: #000000;
						font-weight: 600;
						font-size: 28rpx;
					}

					.wz-color-reading2 {
						color: #000000;
						font-weight: 600;
						font-size: 28rpx;
					}

					.wz-color-graduated2 {
						color: #000000;
						font-weight: 600;
						font-size: 28rpx;
					}

					.wz-color-potential2 {
						color: #000000;
						font-weight: 600;
						font-size: 28rpx;
					}
				}

				.all_potent {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					color: #c2c2c2;
					font-size: 22rpx;
					height: 80rpx;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;

					.all_shuju1 {}

					.all_shuju2 {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.all_shuju2_img {
							width: 20rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}
					}
				}

				.alls_potent {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					height: 80rpx;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;

					.alls_shuju1 {
						font-size: 28rpx;
					}

					.alls_shuju2 {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.alls_shuju2_img {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}

			.li_stall {
				height: 50vh;
				padding: 20rpx;
				.listsee {
					background-color: #fff;
					padding: 20rpx;
					border-radius: 10rpx;
					width: 96%;
					margin-left: 2%;
					border: 2rpx #fff solid;
					margin-bottom: 20rpx;
				}

				.active1 {
					border: 2rpx #0000ff solid;
				}
			}
			.onlist {
				height: 60vh;
				padding: 0 20rpx 0 20rpx;
				.item {
					padding: 20rpx 0;
			
					.info-container {
						display: flex;
						// flex-grow: 1;
						align-items: center;
						justify-content: space-between;
						padding-right: 20rpx;
						/* 根据需要调整右边距 */
					}
			
					.name {
						width: 130rpx;
					}
			
					.input-wrapper {
						min-width: 100rpx;
						/* 根据需要设置最小宽度 */
					}
			
					.aligned-input {
						font-size: 22rpx;
						border: 1rpx #e8e8e8 solid;
						padding-left: 10rpx;
						width: 200rpx;
						/* 使输入框填充整个容器 */
						box-sizing: border-box;
						/* 确保内边距和边框计入元素总宽度 */
					}
			
					.tag {
						margin-left: 10rpx;
					}
			
					.phone {
						color: #BEBEBE;
						font-size: 26rpx;
						margin-top: 13rpx;
					}
				}
			}

		}
	}
</style>